<template>
  <div class="flex publish-page">
    <vue-header title="发布" :visibleBackBtn="false"></vue-header>
    <div class="flex flex-scroll">
      <swiper :list="carouselList" height="135px"
        dots-class="carouse-dot"
        dots-position="center"
        :auto="true"
        :loop="true"
        :interval="5000"
      ></swiper>
      <!-- <div class="banner">
        <img src="/static/images/banner01@2x.png" width="100%">
      </div> -->

      <tab class="tabs" :line-width="2" custom-bar-width="40px" default-color="#A9A9A9">
        <tab-item :selected="true" @click.native="selected = 'UsedCar'">二手车</tab-item>
        <tab-item @click.native="selected = 'Sign'">标书</tab-item>
        <tab-item @click.native="selected = 'SeekCar'">人找车</tab-item>
        <tab-item @click.native="selected = 'SeekPerson'">车找人</tab-item>
      </tab>

      <!-- <div class="bigText">
        <big>{{ count }}</big>
        <small>位用户提交了卖二手车申请</small>
      </div> -->


        <div style="position:relative; margin-top:20px;">
          <transition :name="transitionName">
            <keep-alive>
              <component :is="selected" class="main" v-bind="componentParams"></component>
            </keep-alive>
          </transition>
        </div>

      <router-view class="com-modal"></router-view>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper } from 'vux'
import UsedCar from './UsedCar'
import Sign from './Sign'
import SeekCar from './Seek'
import SeekPerson from './Seek'
export default {
  components: {
    Tab,
    TabItem,
    UsedCar,
    Sign,
    SeekCar,
    SeekPerson,
    Swiper
  },

  data (){
    return {
      carouselList: [],
      count: 641224,
      selected: '`UsedCar`',
      componentParams: {
        type: 1
      },
      transitionName: 'move-in'
    }
  },

  mounted (){
    this.loadCarousel()
  },

  watch: {
    selected (newVal, oldVal){
      if(newVal === 'SeekCar'){
        this.componentParams.type = 2
      }
      if(newVal === 'SeekPerson'){
        this.componentParams.type = 1
      }

      var order = {
        UsedCar: 0,
        Sign: 1,
        SeekCar: 2,
        SeekPerson: 3
      }

      this.transitionName = order[newVal] > order[oldVal] ? 'move-in' : 'move-out'
    }
  },

  methods: {
    // 切换至 找车/找人
    setSeek (type){
      this.selected = 'seek'
      this.componentParams.type = type
    },

    // 获取轮播图
    loadCarousel (){
      _api('ad/getListByCon', {
        ad_position: 2
      }).then(({data}) =>{
        this.carouselList = data.map(data =>{
          if(data.ad_type === 1){
            var richTextUrl = '/common/richText?id=' + data.id
            sessionStorage.setItem('richText-' + data.id, data.content_html)
          }

          var url = richTextUrl || data.target || 'javascript:'
          return { url, img: data.img }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.publish-page{
  background-color: white;
}

/deep/ .vux-tab-container{
  padding: 0 20px;
  border-bottom: 1px #eee solid;
}

/deep/ .vux-tab-item:not(foo){
  font-size: 18px;
  background: none;

  &.vux-tab-selected{
    color: #333;
  }
}

.bigText{
  font-size: 20px;
  text-align: center;
  padding: 20px;
}

.main{
  padding: 0 30px 30px 30px;
}

/deep/ .vux-slider{
  overflow: initial;
}
</style>
